<!--盘点流水-->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isNeedTree="true"
      :isCheckbox="true"
      @setSelectedNode="setSelectedNode"
      :paramName="paramName"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('MOBILE:CHECK:LIST')"
              @click.prevent="exportData()"
            >导出</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span v-else-if="'checkTotalCount' == props.prop">
                  <a
                    class="imgLink"
                    @click="showParkingCheckDetail('parkingCheckDetailModal', scope.row.code)"
                  >{{ scope.row[props.prop] }}</a>
                </span>
                <span v-else-if="'checkPresentCount' == props.prop">
                  <a
                    class="imgLink"
                    @click="showParkingCheckDetail('parkingCheckDetailModal', scope.row.code, '0')"
                  >{{ scope.row[props.prop] }}</a>
                </span>
                <span v-else-if="'checkNightCount' == props.prop">
                  <a
                    class="imgLink"
                    @click="showParkingCheckDetail('parkingCheckDetailModal', scope.row.code, '', '1')"
                  >{{ scope.row[props.prop] }}</a>
                </span>
                <span v-else-if="'checkSupplementCount' == props.prop">
                  <a
                    class="imgLink"
                    @click="showParkingCheckDetail('parkingCheckDetailModal', scope.row.code, '2')"
                  >{{ scope.row[props.prop] }}</a>
                </span>
                <span v-else-if="'checkLeaveCount' == props.prop">
                  <a
                    class="imgLink"
                    @click="showParkingCheckDetail('parkingCheckDetailModal', scope.row.code, '1')"
                  >{{ scope.row[props.prop] }}</a>
                </span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="80"
              class-name="operateCell"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  icon="icon-info"
                  class="ake-icon-font"
                  title="详情"
                  @click="showParkingCheckDetail('parkingCheckDetailModal', scope.row.code)"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <!-- 查看详情 modal       -->
    <basic-modal ref="parkingCheckDetailModal" static="true" width="1000">
      <h3 slot="title">盘点明细</h3>
      <div class="ModalBody tmpdetailCSS" slot="modal-body">
        <parkingCheckDetail :setData="detailSetData"></parkingCheckDetail>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text modal-close"
          @click="closed('parkingCheckDetailModal')"
        >关闭</button>
      </div>
    </basic-modal>

    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";
// 引进盘点详情的组件
import parkingCheckDetail from "./parking_check_detail.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import parking_check from "./js/parking_check.js";

export default {
  name: "parkingCheck",
  mixins: [common, stardardList, invokeModal, images, parking_check],
  components: {
    BigPicModal,
    parkingCheckDetail
  },
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];

    return {
      paramName: 'parkIds',
      fixedCols: 3,
      total: 0,
      detailSetData: {
        fixedCols: 1,
        isShowTableHead: false,
        searchList: {}
      },
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        {
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "上报时间",
          propName: "reportTimeFrom,reportTimeTo",
          value: today,
          style: { width: "360px" }
        },
        {
          type: "text",
          isShow: false,
          name: "code",
          text: "盘点编号",
          value: "",
          style: { width: "360px" }
        },
        {
          type: "text",
          isShow: false,
          name: "realName",
          text: "姓名",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "phone",
          text: "手机号码",
          value: ""
        },
        {
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "盘点开始时间",
          propName: "startCheckTimeFrom,startCheckTimeTo",
          value: "",
          style: { width: "360px" }
        },
        {
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "盘点结束时间",
          propName: "endCheckTimeFrom,endCheckTimeTo",
          value: "",
          style: { width: "360px" }
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 64 },
        {
          index: 1,
          isShow: false,
          prop: "code",
          text: "盘点编号",
          sortable: true,
          minWidth: 50,
          initHidden: true
        },
        {
          index: 2,
          isShow: false,
          prop: "realName",
          text: "盘点人",
          sortable: true,
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: "phone",
          text: "手机号码",
          sortable: true,
          minWidth: 60
        },
        {
          index: 4,
          isShow: false,
          prop: "startCheckTime",
          text: "盘点开始时间",
          sortable: true,
          minWidth: 80,
          initHidden: true
        },
        {
          index: 5,
          isShow: false,
          prop: "endCheckTime",
          text: "盘点结束时间",
          sortable: true,
          minWidth: 80,
          initHidden: true
        },
        {
          index: 6,
          isShow: false,
          prop: "checkTotalCount",
          text: "盘点总数",
          sortable: true,
          minWidth: 50
        },
        {
          index: 7,
          isShow: false,
          prop: "checkPresentCount",
          text: "在场车辆(不含补录)",
          sortable: true,
          minWidth: 50
        },
        {
          index: 8,
          isShow: false,
          prop: "checkNightCount",
          text: "过夜车",
          sortable: true,
          minWidth: 50
        },
        {
          index: 9,
          isShow: false,
          prop: "checkSupplementCount",
          text: "补录车",
          sortable: true,
          minWidth: 50
        },
        {
          index: 10,
          isShow: false,
          prop: "checkLeaveCount",
          text: "离场车",
          sortable: true,
          minWidth: 50
        },
        {
          index: 11,
          isShow: false,
          prop: "reportTime",
          text: "上报时间",
          sortable: true,
          minWidth: 80,
          initHidden: true
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.tmpdetailCSS {
  max-height: 518px;
  overflow: auto;
  .common-body-wrapper {
    position: relative;
  }
}
</style>
